<template>
  <zh-form-item
    :desc="props.desc"
    :layout="props.layout"
    :required="props.required"
    :label="props.label"
    :field="props.field"
    :rules="props.rules"
    :margin="props.margin"
    :padding="props.padding"
    :parentClass="props.parentClass"
    :align="props.align"
    :help="props.help"
    :border="props.border"
    :showError="props.showError"
    :requiredTitleChangeColor="props.requiredTitleChangeColor"
    :transprent="true"
    :round="props.round"
  >
    <template v-slot:labelRight>
      <view class="flex-row-center-end">
        <zh-text :color="props.color" :label="getUploadCount"></zh-text>
        <zh-text label="/"></zh-text>
        <zh-text :label="props.maxFile"></zh-text>
      </view>
    </template>
    <view class="pt-20 pb-10">
      <zh-upload
        v-bind="allAttrs"
        :followTheme="props.followTheme"
        :width="props.width"
        :rows="props.rows"
        :imageHeight="props.imageHeight"
        :defaultValue="props.defaultValue"
        v-model:fileList="_fileList"
        :maxFile="props.maxFile"
        :count="props.count"
        v-model="_value"
        :transprent="props.transprent ? props.transprent : zhFormTransprent"
        :returnType="props.returnType"
        :color="props.color"
        :modelType="props.modelType"
      >
      </zh-upload>
    </view>
    <slot name="desc"></slot>
  </zh-form-item>
</template>

<script lang="ts" setup>
import { computed, watch, PropType, useAttrs, ref, getCurrentInstance, onUnmounted, Ref, inject, isProxy, toRaw, ComputedRef, onMounted, nextTick } from 'vue';
import { rulesItem } from './../zh-form-item/interface';
const props = defineProps({
  parentClass: {
    type: String,
    default: '',
  },
  align: {
    type: String,
    default: '',
  },
  inputAlign: {
    type: String,
    default: '',
  },
  label: {
    type: String,
    default: '',
  },
  layout: {
    type: String as PropType<'vertical' | 'horizontal'>,
    default: 'vertical',
  },
  followTheme: {
    type: [Boolean, String],
    default: true,
  },
  width: {
    type: Number,
    default: 650,
  },
  //一行排列几个。
  rows: {
    type: Number,
    default: 5,
  },
  //图片的高度
  imageHeight: {
    type: Number,
    default: 140,
  },
  defaultValue: {
    type: [String, Object, Array as PropType<Array<file>>],
    default: () => [],
  },
  fileList: {
    type: [String, Object, Array as PropType<Array<file>>],
    default: () => [],
  },
  //最多可选择文件
  maxFile: {
    type: Number,
    default: 9,
  },
  //每次可选择的文件数量
  count: {
    type: Number,
    default: 1,
  },
  //返回类型：url showId
  returnType: {
    type: String,
    default: 'showId',
  },
  //返回格式 string 字符串 多个用英文逗号隔开，array 数组
  modelType: {
    type: String,
    default: 'string',
  },
  color: {
    type: String,
    default: 'primary',
  },
  //表单描述
  desc: {
    type: String,
    default: '',
  },
  field: {
    type: String,
    default: '',
  },
  //表彰底部的单项注意说明。
  help: {
    type: String,
    default: '',
  },
  //是否必填
  required: {
    type: Boolean,
    default: false,
  },
  //检验规则
  rules: {
    type: [Object, Array] as PropType<Array<rulesItem> | rulesItem>,
    default: () => {
      return [{ validator: false, required: false }];
    },
  },
  margin: {
    type: Array as PropType<Array<number>>,
    default: () => [0, 12],
  },
  padding: {
    type: Array as PropType<Array<number>>,
    default: () => [0, 0],
  },
  //显示下划线。
  border: {
    type: Boolean,
    default: null,
  },
  showError: {
    type: Boolean,
    default: true,
  },
  //校验不通过时，是否让标题跟着变化文字颜色，默认是。
  requiredTitleChangeColor: {
    type: Boolean,
    default: false,
  },
  transprent: {
    type: [Boolean, String],
    default: null,
  },
  round: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: [Number, String, Boolean, Array],
    default: undefined,
  },
  //前缀图标
  prefix: {
    type: String,
    default: '',
  },
  extend: {
    // 扩展属性，对象形式，存放组件的扩展属性
    type: Object,
    default: () => {
      return {};
    },
  },
});
const attrs = useAttrs();
const allAttrs = computed(() => {
  return Object.assign(props.extend, attrs);
});
const emits = defineEmits(['update:modelValue', 'update:fileList']);
const _value = ref(props.modelValue);
const _fileList = ref(props.fileList);
const zhFormInputAlign = inject(
  'zhFormInputAlign',
  computed(() => 'left')
);
const zhFormTransprent = inject(
  'zhFormTransprent',
  computed(() => false)
);
const getUploadCount = computed(() => {
  let count = 0;
  if (_fileList.value && _fileList.value.length > 0) {
    _fileList.value.forEach((item: any) => {
      if (item.statusCode == 3) {
        count++;
      }
    });
  }
  return count;
});
watch(
  () => props.modelValue,
  (val) => {
    _value.value = val;
  },
  {
    deep: true,
  }
);
watch(
  () => _value.value,
  (val) => {
    emits('update:modelValue', val);
  },
  {
    deep: true,
  }
);
watch(
  () => _fileList.value,
  (val) => {
    emits('update:fileList', val);
  },
  {
    deep: true,
  }
);
</script>

<style></style>
